<template>
  <PageWrapper>
    <BasicTable
      @register="register"
      @draggable-start="handleDragStart"
      @draggable-end="handleDragEnd"
      :dragable="true"
    />
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@/components/Page';
  import { ref } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';

  const columns: any = [
    {
      title: '用户名',
      dataIndex: 'userName',
      align: 'left',
      dragable: true,
    },
    {
      title: '所属角色',
      dataIndex: 'roleIds',
      component: 'ApiSelect',
      componentProps: {
        api: '/sys/role/select',
        // api: sysRoleSelect,
      },
      dragable: true,
      align: 'left',
    },
    {
      title: '姓名',
      dataIndex: 'realName',
    },
    {
      title: '手机号',
      dataIndex: 'mobilePhone',
    },
  ];
  const dataSource = ref([
    {
      id: '1',
      userName: 'superAdmin',
      realName: '张三',
      mobilePhone: '18234098989',
      roleIds: '1',
    },
    {
      id: '2',
      userName: 'admin',
      realName: '李四',
      mobilePhone: '18234098982',
      roleIds: '2',
    },
    {
      id: '3',
      userName: 'test',
      realName: '王五',
      mobilePhone: '18234098985',
      roleIds: '3',
    },
  ]);
  const handleDragStart = (e) => {
    console.log('开始拖拽', e);
  };
  const handleDragEnd = (e) => {
    console.log('结束拖拽', e);
  };
  const [register] = useTable({
    columns,
    dataSource,
    showIndexColumn: false,
  });
</script>
<style lang="less" scoped>
  .item {
    border: 1px solid red;
    line-height: 64px;
  }

  .sortable-chosen {
    background: #967474;
  }

  .sortable-drag {
    background: #cf1b1b;
  }
</style>
